<template>
  <div class="div">
    <!-- 面包屑 -->
    <div class="top-div">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">客户</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">客户类型</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="primary" icon="el-icon-plus">新增</el-button>
    </div>
    <div class="table-div">
      <!-- search搜索框。 -->
      <el-input
        v-model="formData"
        placeholder="输入客户名称/客户账号/源订单号"
        class="ordersituation-input"
      >
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
      <!-- dropdown下拉菜单。 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          下单日期
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>下单日期</el-dropdown-item>
          <el-dropdown-item>发货日期</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- datePicker日期选择器。 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
      <!-- select选择器。 -->

      <el-select
        v-model="value01"
        placeholder="全部"
        style="width: 100px; margin-left: 5px"
      >
        <el-option
          v-for="item in options01"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="value02"
        placeholder="全部区域"
        style="width: 100px; margin-left: 5px"
      >
        <el-option
          v-for="item in options02"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="value03"
        placeholder="账户状态"
        style="width: 100px; margin-left: 5px"
      >
        <el-option
          v-for="item in options03"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <!-- 发催单短信button -->
      <el-button type="primary" class="ordersituation-el-button">
        发送催单短信
      </el-button>
      <!-- table表格组件。 -->
      <template class="ordersituation-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="客户账号" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="客户编码"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="客户名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="详细地址"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="业务员"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="最后下单时间"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="最近一次下单时间"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="下单次数"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="下单金额"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="发货金额"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="address"
            label="下单历史"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </template>
    </div>
    <!-- paging 分页 -->
    <div class="bottom-div">
      <span class="demonstration"></span>
      <el-pagination
        class="bottom-div-paging"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        background
        layout="total, prev, pager, next, sizes , jumper"
        :total="8"
      ></el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      options01: [
        {
          value: '选项1',
          label: '全部',
        },
        {
          value: '选项2',
          label: '已下单',
        },
        {
          value: '选项3',
          label: '未下单',
        },
      ],
      value01: '',
      options02: [
        {
          value: '选项1',
          label: '全部区域',
        },
        {
          value: '选项2',
          label: '天心区',
        },
        {
          value: '选项3',
          label: '雨花区',
        },
      ],
      value02: '',
      options03: [
        {
          value: '选项1',
          label: '全部',
        },
        {
          value: '选项2',
          label: '未审核',
        },
        {
          value: '选项3',
          label: '被禁用',
        },
      ],
      value03: '',
      multipleSelection: [],
    }
  },
}
</script>

<style scoped lang="scss">
* {
  margin: 0%;
  padding: 0%;
}
.div {
  .top-div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45.6px;
    background-color: white;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; //不换行。
    justify-content: space-between;
    //面包屑的样式。
    .el-breadcrumb {
      margin-left: 23px;
    }
    button.el-button.el-button--primary.el-button--small {
      margin-right: 50px;
      width: 75px;
      height: 30px;
    }
  }
  .table-div {
    padding: 10px 20px;
    margin-top: 40px;
    background-color: white;
    // input搜索框。
    .ordersituation-input {
      width: 270px;
    }
    //多选框对齐。
    ::v-deep .el-table td.el-table__cell div {
      box-sizing: border-box;
      padding: 0 10px;
    }
    span.el-dropdown-link.el-dropdown-selfdefine {
      margin: 0 10px;
    }
    //input的按钮。
    button.el-button.el-button--default.el-button--small {
      width: 42px;
      height: 32px;
      background-color: rgb(24, 144, 255);
    }
    ::v-deep .el-icon-search:before {
      color: white;
    }
    ::v-deep .el-input-group__append {
      border: none;
    }
    .block {
      display: inline-block;
    }
    // 发送催单短信button。
    .ordersituation-el-button {
      width: 100px;
      height: 30px;
      background-color: rgb(24, 144, 255);
      color: white;
      margin-left: 183px;
    }
    //table margin-top
    .el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition.el-table--small {
      margin-top: 10px;
    }
  }
  // 分页 。
  .bottom-div {
    //设置分页的位置为“向右对齐”。
    .bottom-div-paging {
      text-align: start;
      margin-left: 20px;
    }
  }
  ::v-deep .el-pagination.is-background {
    margin-top: 0;
  }
}
</style>
